<template>
  <div class="search_page" v-show="search.show">
        <div class="wrap">
              <div class="reback" @click="cancel();"></div>
              <div class="left">
                    <input type="search" v-model="search.initialKey" placeholder="搜索"/>
              </div>
              <div class="btn" @click="check();">搜索</div>
        </div>
        <div class="items">
              <p class="title">热门搜索</p>
              <ul>
                   <li v-for="hot in hots" @click="active(hot);">{{hot}}</li>
              </ul>
        </div>
        <div class="items">
              <p class="title">校区搜索</p>
              <ul>
                   <li v-for="school in schools" @click="active(school);">{{school}}</li>
              </ul>
        </div>
  </div>
</template>

<script>
export default {
  data(){
      return{
          hots:['数学','语文','陈灿','高晓松'],
          schools:['中山大学','中山大学（南校区）','中山大学（北校区）','中山大学（南海校区）']
      }
  },
  props:['search'],
  methods:{
    active(item){
       this.search.key=item;
       this.search.show=false;
    },
    cancel(){
       this.search.initialKey=this.search.key;
       this.search.show=false;
    },
    check(){
       this.search.key=this.search.initialKey;
       this.search.show=false;
       return false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.search_page
{
  background:#fff;
  height:100%;
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index: 1001;
  .wrap
  {
    display:flex;
    background:#f5f5f5;
    .reback
    {
      flex:0 0 0.8rem;
      padding:0.1rem 0;
      text-align:center;
      line-height:0.6rem;
      height:0.6rem;
      color:#078def;
      background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498634672&di=8dbbae7398f2e9e8d8c3c530bfd06b5f&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.sootuu.com%2Fvector%2F2007-07-01%2F068%2F3%2F200.gif);
      background-size:auto 0.3rem;
      background-position:0.3rem center;
      background-repeat:no-repeat;

    }
    .left
    {
      flex:1;
      padding:0.1rem 0 0.1rem 0.2rem;
      input 
      {
         width:100%;
         text-indent:0.2rem;
         line-height:0.6rem;
         border:1px solid #eee;
         border-radius:0.1rem;
      }
    }
    .btn
    {
      flex:0 0 1.2rem;
      padding:0.1rem 0;
      text-align:center;
      line-height:0.6rem;
      height:0.6rem;
      color:#078def;
    }
  }
  .items
  {
    padding:0 0.3rem;
    .title
    {
      padding:0.3rem 0 0.2rem 0;
      border-bottom:1px solid #eee;
      font-weight:550;
      color:#666;
    }
    ul
    {
      li
      {
        line-height:0.7rem;
      }
    }
  }
}
</style>
